<template>
  <div>
    <my-user>
      <template v-slot:header>
        <h2>我是标题渲染的</h2>
      </template>
    
      <!--  子组件slot上传过来的值，还可以解构 -->

      <!-- 给v-slot:插槽名 = "喜欢的变量名"， slot标签上的属性都存到了这个对象中 -->
      <!-- ===> { user:{}, age:18} -->
      <template #default="{user, age}">
        <!-- <div>{{slotProps}}</div> -->
        <div>{{age}}</div>
        <div>{{user.lastName}}</div>
        <div>{{user.firstName}}</div>
      <!-- // 补充代码 -->
      </template>
      
      <!-- {msg:"xxx"} -->
      <template v-slot:footer="obj">
        <div>{{obj}}</div>
        <div>{{obj.msg}}</div>
        <p>我是底部footer渲染</p>
      </template>
    </my-user>
    
  </div>
</template>

<script>
import MyUser from './components/MyUser.vue'
export default {
  components:{
    // MyDialog,
    MyUser
  }
}
</script>

<style>
.main{
  width: 200px;
  height: 200px;
  border:1px solid red;
}
</style>